<template>
  <el-dialog :visible="open" @update:visible="updateVisible" @close="cancel" width="900px" append-to-body>
    <el-descriptions title="基本信息"></el-descriptions>
    <el-form size="small" ref="form" :model="form" :rules="rules" label-width="150px">

      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="公司编码" prop="companyCode">
            <el-input disabled v-model="form.companyCode" placeholder="系统自动生成" maxlength="30" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码" prop="orgCode">
            <el-input v-model="form.orgCode" placeholder="请输入统一社会信用代码" />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="简称" prop="companyAbbreviation">
            <el-input v-model="form.companyAbbreviation" placeholder="请输入简称" maxlength="30" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司名称" prop="companyName">
            <el-input v-model="form.companyName" placeholder="请输入公司名称" maxlength="30" />
          </el-form-item>
        </el-col>

      </el-row>

      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="form.contacts" placeholder="请输入联系人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="mobile">
            <el-input v-model="form.mobile" placeholder="请输入联系电话" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="注册类型" prop="registeType">
            <el-select v-model="form.registeType" placeholder="请选择注册类型">
              <el-option label="驻区企业" value="1"></el-option>
              <el-option label="承运企业" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-switch v-model="form.status" active-value="0" inactive-value="-1"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">

        <el-col :span="12">
          <el-form-item label="企业登录账号" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入企业登录账号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业登录密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入企业登录密码" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addtransportCompany, getnextCode, getpassword } from '@/api/organization/transportCompany.js'
export default {
  props: {
    open: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        companyAbbreviation: '', //简称
        companyCode: '', //公司编码
        companyName: '', //公司名称
        contacts: '', //联系人
        mobile: '', //联系电话
        orgCode: '', //统一社会信用代码
        password: '', //企业登录密码
        registeType: '', //1 驻区企业 2 承运企业 固定传 2
        status: '', //状态 启用：”0” 禁用: ”-1”
        telephone: null, //电话
        userName: '' //企业登录账号
      },
      rules: {
        companyAbbreviation: [{ required: true, message: '请输入简称', trigger: 'blur' }],
        companyCode: [{ required: true, message: '请输入公司编码', trigger: 'blur' }],
        companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
        contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        mobile: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^[0-9]{11}$/, message: '请输入11位手机号', trigger: 'blur' }
        ],
        orgCode: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
        registeType: [{ required: true, message: '请选择注册类型', trigger: 'change' }],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        userName: [{ required: true, message: '请输入企业登录账号', trigger: 'blur' }]
      }
    }
  },

  created() {
    this.getCode()
    this.getPwd()
  },
  methods: {
    updateVisible(val) {
      if (!val) {
        this.resetForm()
      }
    },

    //获取企业编码
    getCode() {
      getnextCode()
        .then((res) => {
          console.log(res)
          this.form.companyCode = res.msg
        })
        .catch((err) => {
          console.error(err)
        })
    },

    //获取密码
    getPwd() {
      const configKey = 'sys.user.initPassword'
      getpassword(configKey)
        .then((res) => {
          console.log(res)
          this.form.password = res.msg
        })
        .catch((err) => {
          console.error(err)
        })
    },

    resetForm() {
      // 重置表单的逻辑
    },
    // 取消
    cancel() {
      this.$emit('cancel')
    },

    //提交
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form)
          // 表单校验通过，可以提交数据
          this.saveFormData()
        } else {
          // 表单校验不通过，不执行任何操作
          return false
        }
      })
    },
    saveFormData() {
      addtransportCompany(this.form)
        .then((response) => {
          console.log('数据提交成功', response)
          // 清空表单数据
          this.resetForm()
          // 关闭对话框
          this.$emit('submit-form')
        })
        .catch((error) => {
          console.error('数据提交失败', error)
        })
    }
  }
}
</script>
